<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>

  </div>
</body>
<script>

  /*
  axios

  同源政策

  跨域
  1jsonp
  2cors请求头
  3代理服务器
  正向代理 客户端代理 ngixn服务器
  反向代理  服务器代理
  */



  /*
  Vue后台管理项目
  特定 SPA单页面应用
  开发周期 3-6个月
  ##
  配置手册
  1.自动启动游览器 dev server
  2.ESLink 检查检查栈
   -D 开发依赖

  2.1关闭Eslint
  可以选择关闭eslint
    在vue.config.js中配置 lintOnSave:false
    可以在.eslintrc.js中配置rules
    对内置的配置进行覆盖
    部分代码忽略eslint检测
    可以使用 eslint-disabled-next-line xxxx 或  eslint-disabled xxxx 
   3.路径别名
   4.less
   5.编程路由导航Bug 解决重写 VUE 的push 方法
   6.Footer 页脚的切换 封装检查当前路由地址是哪一个地址 根据路由地址 控制的显示隐藏
   7.NavType 全局组件注册
   8.拆分静态页面 
   9.axios配置
    创建util文件夹
    创建axios实列
    配置拦截器

  10.dev代理服务器
    proxy:{}
    ‘/ api’ : 当你发起请求的时候需要拼接在请求中，告诉服务器你要走代理的服务。
    例如：vue项目localhost：8080。后端是localhost：3000。
    那我发起请求就需要localhost：8080/api/list，如果没有/ api会本地的服务（localhost：8080）中寻找
        changeOrigin:
        类型为Boolean值，这个相当于欺骗服务器，为true的话，后端地址和端口为本服务的，为false是你是实际的地址和端口号，
          例如：前端项目localhost：8080，后端localhost：3000，changeOrigin为true, 后端接受的到将是localhost：3000，changeOrigin为false，后端接受的到将是localhost：8080.

          pathRewrite：重写取决于接口

        路径重写
        例如：localhost：3000/app/list 这个时候我设置了‘/ api' 那就必须重写，不然的话会吧api这个拼接起来提交给后端。localhost:3000/api/app/list. 所以报404了。
        路径不要重写
        例如：localhost：3000 / app / list。这个时候我设置了‘/app' 那就不用重写了，localhost:3000/app / list。

  11.环境变量那么牛7 

  12.获取数据，渲染列表

  13.
  节流原生 lodash


  14.

  复习
  首页三级列表
  防抖
  节流
  lodash节流
  事件委托 搜索跳转

  15.
  提取公共组件



  18?搜索页面组件
  首先我们要把静态组件引入
  然后在api中定义接口 /api/list 是post 请求 需要额外传递data参数
  我们将数据保存在vueX里面
  定义state  searchList 保存数据的数组
  定义方法mutation 提交修改
  定义异步actions 
  引入请求 需要post请求携带的参数 searchParams
   提交要修改的函数  (将请求到的数据一并发过去)
  定义getters
  从state 中
  细化出
  品牌
  品牌列表
  商品等数据
  //将新的search vueX模块注册

  在search组件中
  定义请求参数searchParams
  在mounted中初始化数据
  合并params和query参数
  虽然之后可以在watch中
  （在mounted中初始化数据
  合并params和query参数）

  初始化数据完成 要进行数据渲染
  渲染数据 
  从getters中 去商品数据
  

  //3.移除tag的事件
  移除搜索框数据
  移除品牌数据
  子传父自定义事件回调函数 点击品牌列表添加数据
  子传父自定义事件回调函数(传递prop)
  改变升降序事件
  在searchSelector组件中
  选择品牌跳转页面函数
   选择品牌列表标题跳转页面函数
  
  //页码逻辑
   页码组件 静态组件  公共组件 需要全局注册
    对应分页器 我们需要以下字段需要
    pageNo 当前的第几个
    pageSize 代表每一页展示多少条数据
    total 代表整个分页一共要展示多少数据
    continues:代表分页连续页码的个树

    完成分页器逻辑
    重点在与计算连续页码
    定义 起始 和终止页码
    处理特殊情况
    1总页数不够 continues>totalPages
    # start = 1
      end = totalPages
    2 起始页码为负数 必须为1 start <1
    # start =1
    end = continues
    3 终止页码大于总页数  end > totalPages
    # end = totalPages
    start = total - continues + 1
      return { start, end };
      拿数据
      静态渲染页码

      使用页码组件
      点击每一个页码要改变 子传父 自定义事件
      给页码组件传递自定义事件
      在页码事件的每一个要点击的button 传递 页码值
      在使用页码的组件 
      更改当前选择页码
      this.searchParams.pageNo = page;
      重新发送请求

      
   //详情页逻辑
   引组件
   写路由
   测请求
   #
   处理假报错
   深度监听原来
   初始的数据什么都没有 || {}  ||或操作符
   初始的数据什么都没有？ ？可选链操作符

   //排他选项框
    :class="{ active: item.isChecked === '1' }"
     @click="changeChecked(spuAttr.spuSaleAttrValueList, item)"
     把数组和当前点击的项传过来
     遍历数组 把isChecked = 0
     把item 的isChecked = 1

   //缩略图 swiper
   watch 监听skuImageList变化
  一行显示几个slider
  slidesPerView: 4,
   多少个sliders为一组
   slidesPerGroup: 1,
   事件总线 兄弟组件传值
   给被改变的组件绑定事件
   给点击的组件调用事件并传参

   //放大镜
   给外层div绑定事件 e
   计算鼠标距离外出的距离
   计算蒙版的位置
   处理临界值
   获取dom元素 给位置赋值
   获取大图dom元素 给位置赋值 方向是反的 比例是两倍

   //加入购物车组件
    api请求
   添加购物车成功静态 （配置路由）
   设置跳转购物车成功的路由 编程式路由导航
  在Detail组件中sessionStoreeage临时保存数据
  在加入购物车组件中取 JSON.parse(sessionStorage.getItem("cartData")那数据
  渲染视图


  //购物车管理组件
  加入商品
  购物车没有数据
  原因：商品添加了 成功了 但是后端不知道把商品加给谁 所以 他什么也没做 所以购物车内也没有数据
  #
  使用用户临时标识
  配置随机生成id的函数
  在vux中保存临时ID数据
  在axios中配置请求头
  每次发送请求的时候，在header中携带用户临时标识
  渲染静态视图
~ 购物车总数 总价格 全选
  //商品数量的改动
  //修改单个商品的选中状态
  //修改所有商品的选中状态
  //删除单个商品
  //删除所有的购物车商品

  //登录注册静态组件
  //注册验证码 逻辑
  //完成注册跳转登录

  //登录权限校验
  async函数 返回 一个Promise实例 
  .prevent 阻止默认事件 修饰符
  导航守卫
  全局守卫 路由跳转
  路由独享 针对 路由
  组件守卫  加载组件
  React 路由守卫没有 怎么办 高阶组件 

  commit mutations
  dispatch actions

  token校验逻辑
  -完成登录逻辑，拿到token，保存起来
  -确定哪些页面需要token才能加入。那些不需要token就可以加入
  -因为每次进入路由前都需要校验，设置全局前置守卫

  //使用一个数组保存需要token 页面的路由地址
  

  路由独享
  在路由配置上配置
  beforeEnter(to.from,next){

  }

  支付四件套静态组件


  


  */


</script>

</html>